<template>
<div class="list" ref="wrapper">
    <div class="content">
        <div class="area">
            <div class="title border-topbottom">当前城市</div>
            <div class="button-list">
                <div class="button-warmper">
                    <div class="button">{{this.cityAction}}</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button" ref="city">北京</div>
                </div>
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button">上海</div>
                </div>
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button">广州</div>
                </div>
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button">深圳</div>
                </div>
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button">杭州</div>
                </div>
                <div class="button-warmper" @click="btnCityClick">
                    <div class="button">南京</div>
                </div>
            </div>
        </div>
        <!-- 循环显示称城市名列表 -->
        <div class="area" v-for="(citys,index) in cities" :key="index">
            <div class="title border-topbottom" ref="cityList">{{citys.title}}</div>
            <div class="item-list" v-for="(cities,index) in citys.lists" :key="index">
                <div class="item" @click="btnCityClick">{{cities}}</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import {
    mapState
} from 'vuex'
export default {
    name: "CityList",
    props: {
        cities: Array,
        letter: String,
        touchChange: Number,
    },
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
        })
    },
    computed: {
        ...mapState({
            cityAction: state => state.city
        })
    },
    watch: {
        letter() {
            // 判断父组件传入的letter是否存在
            if (this.letter) {
                // 进行循环组件匹配，判断如果传入的letter值与某个组件的内容相等的时候，调用scrollToElement这个方法
                // 将界面在一秒钟之内跳转到该组件上面
                for (var i = 0; i < this.$refs.cityList.length; i++) {
                    if (this.$refs.cityList[i].innerText == this.letter) {
                        this.scroll.scrollToElement(this.$refs.cityList[i], 500)
                    }
                }
            }
        },
        touchChange() {
            // 判断父组件传入的touchCHange是否存在
            if (this.touchChange) {
                // console.log(this.touchChange)
                this.scroll.scrollToElement(this.$refs.cityList[this.touchChange])
            }
        }
    },
    methods: {
        btnCityClick(e) {
            // console.log(e)
            // this.$store.dispatch('changCity',e.target.innerText)
            this.$store.commit('changeCity', e.target.innerText)
            // console.log(e)
            this.$router.push('/')
        }
    }
}
</script>

<style scoped>
.list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin-top: 5rem;
}

.border-topbottom {
    border: 1px solid #ccc
}

.border-topbottom:before {
    border-color: #ccc;
}

.border-topbottom:after {
    border-color: #ccc;
}

.title {
    line-height: 1.4rem;
    background-color: #eee;
    padding-left: 1rem;
    color: #666;
}

.button-list {
    padding: .3rem;
    overflow: hidden;
    padding: .2rem 1rem .2rem .2rem;
}

.button-warmper {
    float: left;
}

.button {
    padding: .1rem 1.4rem;
    text-align: center;
    margin: .2rem;
    border: .02rem solid #ccc;
    font-size: .7rem;
}

.item-list {
    line-height: 1.5rem;
    color: #666;
    padding-left: .5rem;
}

.item {
    border-bottom: 1px solid #eee
}
</style>
